<template>
  <view class="practice">
    <statusBar></statusBar>
    <uni-nav-bar left-icon="back" :title="practiceName"></uni-nav-bar>
    <view style="height:10px;background-color: #f2f2f2;"></view>
    <view class="practice-list">
      <view class="practice-title">
        {{activeIndex + 1}}.{{activeQue.QueTitle}}
        <text v-show="activeQue.QusTypeId == 1">单选题</text>
        <text class="duoxuantext" v-show="activeQue.QusTypeId == 2">多选题</text>
        <text class="panduantext" v-show="activeQue.QusTypeId == 3">判断题</text>
      </view>
      <view style="height:10px;background-color: #f2f2f2;"></view>
      
      <radio-group @change="radioChange($event,activeIndex)" v-if="activeQue.QusTypeId != 2">
      	<label v-if="activeQue.QueOptionA"><view><radio value="A" :checked="checkedItem[0]"/></view><view>{{activeQue.QueOptionA}}</view></label>
        <label v-if="activeQue.QueOptionB"><view><radio value="B" :checked="checkedItem[1]"/></view><view>{{activeQue.QueOptionB}}</view></label>
        <label v-if="activeQue.QueOptionC"><view><radio value="C" :checked="checkedItem[2]"/></view><view>{{activeQue.QueOptionC}}</view></label>
        <label v-if="activeQue.QueOptionD"><view><radio value="D" :checked="checkedItem[3]"/></view><view>{{activeQue.QueOptionD}}</view></label>
        <label v-if="activeQue.QueOptionE"><view><radio value="E" :checked="checkedItem[4]"/></view><view>{{activeQue.QueOptionE}}</view></label>
        <label v-if="activeQue.QueOptionF"><view><radio value="F" :checked="checkedItem[5]"/></view><view>{{activeQue.QueOptionF}}</view></label>
      </radio-group>
      
      <checkbox-group v-model="queModel[activeIndex]" @change="CheckboxChange($event,activeIndex)" v-if="activeQue.QusTypeId == 2">
      	<label v-if="activeQue.QueOptionA">
      		<checkbox value="A" :checked="checkedItem[0]"/><text>{{activeQue.QueOptionA}}</text>
      	</label>
      	<label v-if="activeQue.QueOptionB">
      		<checkbox value="B" :checked="checkedItem[1]"/><text>{{activeQue.QueOptionB}}</text>
      	</label>
        <label v-if="activeQue.QueOptionC">
        	<checkbox value="C" :checked="checkedItem[2]"/><text>{{activeQue.QueOptionC}}</text>
        </label>
        <label v-if="activeQue.QueOptionD">
        	<checkbox value="D" :checked="checkedItem[3]"/><text>{{activeQue.QueOptionD}}</text>
        </label>
        <label v-if="activeQue.QueOptionE">
        	<checkbox value="E" :checked="checkedItem[4]"/><text>{{activeQue.QueOptionE}}</text>
        </label>
        <label v-if="activeQue.QueOptionF">
        	<checkbox value="F" :checked="checkedItem[5]"/><text>{{activeQue.QueOptionF}}</text>
        </label>
      </checkbox-group>
      
      <view class="queanalysis" v-if="analysis">
      	<view class="isright" v-show="queModel[activeIndex].length > 0" :class="{'iserror': activeQue.Answer != answerArr[activeIndex]}">{{erMessage}}</view>
        <view class="isanswer">答案: {{activeQue.Answer}}</view>
        <view class="is">解析: {{activeQue.QueAnalysis}}</view>
        <view class="istongji"></view>
      </view>
      
      <view class="btngroup">
        <button v-if="activeQue.QusTypeId == 2" @click="confirmDuo(activeIndex)">确认提交</button>
      	<button @click="goPrev">上一题</button>
        <button @click="goNext">下一题</button>
        <button @click="showAnswer">查看答案</button>
      </view>
      
      <view class="wline"></view>
      
    </view>
    
    <view class="footlist">
      <view class="footcount" @click="showQueList">
      	<image src="../../static/img/exam/list.png"></image>
        <text class="footcount-num"><text> {{ activeIndex + 1 }} </text> / {{ queList.length }} </text>
      </view>
    	<view class="footlistbtn">
    		<button @click="colTF">{{isShoucang}}</button>
    		<button @click="errpop = true">纠错</button>
    	</view>
    </view>
    
    <uni-popup :show="type === 'middle'" position="middle" mode="fixed" :msg="msg" @hidePopup="togglePopup('')"></uni-popup>
    
    <popup-layer ref="popup" direction="top">
      <view class="quelist">
      	<view class="quelisthead">
      		答题卡（ <text>{{ activeIndex + 1 }} </text> / {{ queList.length }} ）
      	</view>
        <view class="cardlist">
        	<view @click="jumpQue(index)" v-for="(item,index) in queList" :key="index" class="card-list" 
          :class="(answerArr[index] == queList[index].Answer && 'queright') || (answerArr[index].length >= 1 && answerArr[index] != queList[index].Answer && 'querror')"
          >{{index + 1}}</view>
        </view>
      </view>
    </popup-layer>
    
    <view class="errpop" v-if="errpop == true">
    	<view class="errpopcontent">
    		<view class="errpop-title">纠错</view>
        <view class="errpop-center">
        	<view class="errpop-ot">错误描述</view>
        	<textarea v-model="jiucuoMiaoshu" />
        	<view class="errpop-ot">联系方式</view>
        	<input v-model="jiucuoPhone" type="text" />
        	<button @click="confirmJiucuo">确定</button>
        </view>
    	</view>
    </view>
  </view>
</template>

<script>
  import statusBar from "@/components/status-bar.vue"
  import popupLayer from '@/components/popup-layer/popup-layer.vue';
  import uniPopup from '@/components/uni-popup/uni-popup.vue';
  
export default {
  components: {
    popupLayer,
    uniPopup,
    statusBar
  },
  data() {
    return {
      activeIndex: 0,
      errpop: false,
      type: '',
      practiceName: '',
      erMessage: '',
      queList: [],
      queModel: [],
      answerArr: [],
      analysis: false,
      queType: '',
      colList: [],
      jiucuoMiaoshu: '',
      jiucuoPhone: '',
      activeQue: [],
      checkedItem: [false,false,false,false,false,false],
      isShoucang: '',
    };
  },
  onShow() {
    
  },
  onLoad: function (option) { 
    if(option.type == 'shoucang'){
      if(option.mold == 'zjlx'){
        this.getQueList('api/student/Personal/GetColQueByChapter?chapterId='+ option.id +'','chapter');
        this.queType = 'ChapterId';
      }else{
        this.getQueList('api/student/Personal/GetColQueByPaper?paperId='+ option.id +'','paper');
        this.queType = 'PaperId';
      }
    }else if(option.type == 'cuoti'){
      if(option.mold == 'zjlx'){
        this.getQueList('api/student/Personal/GetWrongQueByChapter?chapterId='+ option.id +'','chapter');
        this.queType = 'ChapterId';
      }else{
        this.getQueList('api/student/Personal/GetWrongQueByPaper?paperId='+ option.id +'','paper');
        this.queType = 'PaperId';
      }
    } else if(option.type == 'practice'){
      this.getQueList('api/student/Practice/GetAllQueByChapter?chapterId='+ option.id +'','chapter');
      this.queType = 'ChapterId';
    }
      
  },
  created() {
    uni.showLoading({
    	title: 'loading'
    });
  },
  methods: {
    radioChange(evt,index) {
      this.checkedItem = [false,false,false,false,false,false];
      this.queModel[index] = evt.detail.value;
      this.answerArr[index] = evt.detail.value;
      if(this.queModel[index] == this.queList[index].Answer){
        this.erMessage = '正确';
      }else{
        this.erMessage = '错误';
      }
      this.analysis = true;
      if(evt.detail.value == 'A'){
        this.checkedItem[0] = true;
      }else if(evt.detail.value == 'B'){
        this.checkedItem[1] = true;
      }else if(evt.detail.value == 'C'){
        this.checkedItem[2] = true;
      }else if(evt.detail.value == 'D'){
        this.checkedItem[3] = true;
      }else if(evt.detail.value == 'E'){
        this.checkedItem[4] = true;
      }else if(evt.detail.value == 'F'){
        this.checkedItem[5] = true;
      }
    },
    CheckboxChange(evt,index) {  
      this.checkedItem = [false,false,false,false,false,false];
      this.queModel[index] = evt.detail.value;
      if(evt.detail.value.indexOf('A') != -1){
        this.checkedItem[0] = true;
      }
      if(evt.detail.value.indexOf('B') != -1){
        this.checkedItem[1] = true;
      }
      if(evt.detail.value.indexOf('C') != -1){
        this.checkedItem[2] = true;
      }
      if(evt.detail.value.indexOf('D') != -1){
        this.checkedItem[3] = true;
      }
      if(evt.detail.value.indexOf('E') != -1){
        this.checkedItem[4] = true;
      }
      if(evt.detail.value.indexOf('F') != -1){
        this.checkedItem[5] = true;
      }
    },
    //多选确认
    confirmDuo: function(index){
      var answerStr = this.queModel[index].toString();
      answerStr = answerStr.replace(/,/g, '');
      this.answerArr[index] = answerStr;
      var answerArrs = this.queList[index].Answer.split('');
      if(answerArrs.toString() == this.queModel[index].toString()){
        this.erMessage = '正确';
      }else{
        this.erMessage = '错误';
      }
      this.analysis = true;
    },
    //上一题
    goPrev: function(){
      this.activeIndex--;
      if (this.activeIndex < 0) {
        this.activeIndex = 0;
      }
      this.activeQue = this.queList[this.activeIndex];
      this.analysis = false;
      this.checkedItem = [true,true,true,true,true,true];
      this.checkedItem = [false,false,false,false,false,false];
      if(this.queModel[this.activeIndex].length >= 1){
        if(this.activeQue.QusTypeId != 2){
          this.analysis = true;
        }
        if(this.queModel[this.activeIndex].indexOf('A') != -1){
          this.checkedItem[0] = false;
          this.checkedItem[0] = true;
        }
        if(this.queModel[this.activeIndex].indexOf('B') != -1){
          this.checkedItem[1] = false;
          this.checkedItem[1] = true;
        }
        if(this.queModel[this.activeIndex].indexOf('C') != -1){
          this.checkedItem[2] = false;
          this.checkedItem[2] = true;
        }
        if(this.queModel[this.activeIndex].indexOf('D') != -1){
          this.checkedItem[3] = false;
          this.checkedItem[3] = true;
        }
        if(this.queModel[this.activeIndex].indexOf('E') != -1){
          this.checkedItem[4] = false;
          this.checkedItem[4] = true;
        }
        if(this.queModel[this.activeIndex].indexOf('F') != -1){
          this.checkedItem[5] = false;
          this.checkedItem[5] = true;
        }
      }else{
        
      }
      
    },
    //下一题
    goNext: function(){
      if (this.activeIndex == (this.queList.length - 1)) {
        this.activeIndex = (this.queList.length - 1);
      }else{
        this.activeIndex++;
      }
      this.activeQue = this.queList[this.activeIndex];
      this.analysis = false;
      this.checkedItem = [true,true,true,true,true,true];
      this.checkedItem = [false,false,false,false,false,false];
      if(this.queModel[this.activeIndex].length >= 1){
        if(this.activeQue.QusTypeId != 2){
          this.analysis = true;
        }
        if(this.queModel[this.activeIndex].indexOf('A') != -1){
          this.checkedItem[0] = false;
          this.checkedItem[0] = true;
        }
        if(this.queModel[this.activeIndex].indexOf('B') != -1){
          this.checkedItem[1] = false;
          this.checkedItem[1] = true;
        }
        if(this.queModel[this.activeIndex].indexOf('C') != -1){
          this.checkedItem[2] = false;
          this.checkedItem[2] = true;
        }
        if(this.queModel[this.activeIndex].indexOf('D') != -1){
          this.checkedItem[3] = false;
          this.checkedItem[3] = true;
        }
        if(this.queModel[this.activeIndex].indexOf('E') != -1){
          this.checkedItem[4] = false;
          this.checkedItem[4] = true;
        }
        if(this.queModel[this.activeIndex].indexOf('F') != -1){
          this.checkedItem[5] = false;
          this.checkedItem[5] = true;
        }
      }else{
        
      }
    },
    //查看答案
    showAnswer: function(){
      this.analysis = !this.analysis;
    },
    //展示答题卡
    showQueList: function(){
      this.$refs.popup.show()
    },
    //点击答题卡跳转
    jumpQue: function(index){
      this.activeIndex = index;
      this.$refs.popup.close()
      this.analysis = false;
      this.activeQue = this.queList[this.activeIndex];
      this.checkedItem = [true,true,true,true,true,true];
      this.checkedItem = [false,false,false,false,false,false];
      if(this.queModel[this.activeIndex].length >= 1){
        if(this.activeQue.QusTypeId != 2){
          this.analysis = true;
        }
        if(this.queModel[this.activeIndex].indexOf('A') != -1){
          this.checkedItem[0] = false;
          this.checkedItem[0] = true;
        }
        if(this.queModel[this.activeIndex].indexOf('B') != -1){
          this.checkedItem[1] = false;
          this.checkedItem[1] = true;
        }
        if(this.queModel[this.activeIndex].indexOf('C') != -1){
          this.checkedItem[2] = false;
          this.checkedItem[2] = true;
        }
        if(this.queModel[this.activeIndex].indexOf('D') != -1){
          this.checkedItem[3] = false;
          this.checkedItem[3] = true;
        }
        if(this.queModel[this.activeIndex].indexOf('E') != -1){
          this.checkedItem[4] = false;
          this.checkedItem[4] = true;
        }
        if(this.queModel[this.activeIndex].indexOf('F') != -1){
          this.checkedItem[5] = false;
          this.checkedItem[5] = true;
        }
      }else{
        
      }
    },
    colTF: function(id,index){
      var obj = {};
      console.log(this.activeQue);
      obj.QueId = this.activeQue.QueId;
      obj.ColQueId = this.activeQue.ColQueId;
      obj.IsCollected = !this.activeQue.IsCorrect;
      uni.request({
        method: 'POST',
        header: {
          'Content-Type': 'application/json',
          'Authorization': uni.getStorageSync('token')
        },
        url: this.apiUrl + 'api/student/Practice/CancelOrCollect', 
        data: JSON.stringify(obj),
        success: res => {
          if(res.statusCode == 200){
            this.activeQue.IsCollected = !this.activeQue.IsCollected;
            if(this.activeQue.IsCollected == true){
              this.isShoucang = '取消收藏';
            }else{
              this.isShoucang = '收藏';
            }
            this.msg = '操作成功';
            this.togglePopup('middle');
          }else{
            this.msg = '未知错误';
            this.togglePopup('middle');
          }
        }
      });
    },
    confirmJiucuo: function(){
      this.errpop = false;
      
      if(this.jiucuoPhone == ''){
          this.msg = '请填写联系方式';
          this.togglePopup('middle');
          return false;
      }
      
      uni.request({
        method: 'POST',
        header: {
          'Content-Type': 'application/json',
          'Authorization': uni.getStorageSync('token')
        },
        url: this.apiUrl + 'api/student/Personal/SubmitQueError',
        data: {
            QueId: this.queList[this.activeIndex].QueId,
            content: this.jiucuoMiaoshu,
            contact: this.jiucuoPhone
        },
        success: res => {
          console.log(res);
          if(res.data.state == 'success'){
            this.msg = '提交成功';
            this.togglePopup('middle');
          }else{
            this.msg = '纠错失败';
            this.togglePopup('middle');
          }
        }
      });
    },
    //加载题目
    getQueList: function(url,types){
      uni.request({
        method: 'GET',
        header: {
          'Content-Type': 'application/json',
          'Authorization': uni.getStorageSync('token')
        },
        url: this.apiUrl + url,
        data: {},
        success: res => {
          if(res.data.state == 'success'){
            this.queList = res.data.data.queList;
            for (let i = 0; i < this.queList.length; i++) {
              this.queModel.push([]);
              this.answerArr.push('');
            }
            if(types == 'chapter'){
              this.practiceName = res.data.data.chapterName;
            }else{
              this.practiceName = res.data.data.paper.PaperName;
            }
            this.activeQue = this.queList[0];
            if(this.activeQue.IsCollected == true){
              this.isShoucang = '取消收藏';
            }else{
              this.isShoucang = '收藏';
            }
            uni.hideLoading();
          }else{
            this.msg = '加载题目列表错误';
            this.togglePopup('middle');
          }
        }
      });
    }
  }
};
</script>

<style scoped>
.practice-list{
  background-color: #ffffff;
}
.practice-title {
  padding: 15upx 20upx;
}
.practice-title text {
  display: inline-block;
  color: #FFFFFF;
  padding: 3upx 15upx;
  background-color: #27b28b;
  margin-left: 20upx;
  border-radius: 8px;
}
.practice-title text.duoxuantext{
  background-color: #0A9CE8;
}
.practice-title text.panduantext{
  background-color: #FF5979;
}
uni-checkbox-group{
  display: block;
  padding-top: 40upx;
}
uni-checkbox-group label{
  display: flex;
  padding: 7px 15px;
}
uni-checkbox-group label uni-checkbox{
  margin-right: 10upx;
  position: relative;
  top: -2px;
}
uni-checkbox .uni-checkbox-input{
  border-radius: 50px;
  border: none;
}
uni-radio-group{
  display: block;
  padding-top: 40upx;
}
uni-radio-group label{
  display: flex;
  padding: 7px 15px;
}
uni-radio-group label uni-radio{
  margin-right: 10upx;
  position: relative;
  top: -2px;
}
uni-radio .uni-radio-input{
  border-radius: 50px;
  border: none;
}
uni-checkbox-group {
  display: block;
  padding-top: 40upx;
}
wx-checkbox-group {
  display: block;
  padding-top: 40upx;
}
uni-checkbox-group label {
  display: flex;
  padding: 7px 15px;
}
wx-checkbox-group label {
  display: flex;
  padding: 7px 15px;
}
uni-checkbox-group label uni-checkbox {
  margin-right: 10upx;
  position: relative;
  top: -2px;
}
wx-checkbox-group label wx-checkbox {
  margin-right: 10upx;
  position: relative;
  top: -2px;
}
uni-checkbox .uni-checkbox-input {
  border-radius: 50px;
  border: none;
}
wx-checkbox .uni-checkbox-input {
  border-radius: 50px;
  border: none;
}
uni-radio-group {
  display: block;
  padding-top: 40upx;
}
wx-radio-group {
  display: block;
  padding-top: 40upx;
}
uni-radio-group label {
  display: flex;
  padding: 7px 15px;
}
wx-radio-group label {
  display: flex;
  padding: 7px 15px;
}
uni-radio-group label uni-radio {
  margin-right: 10upx;
  position: relative;
  top: -2px;
}
wx-radio-group label wx-radio {
  margin-right: 10upx;
  position: relative;
  top: -2px;
}
uni-radio .uni-radio-input {
  border-radius: 50px;
  border: none;
}
wx-radio .wx-radio-input {
  border-radius: 50px;
  border: none;
}
wx-checkbox .uni-checkbox-input {
  border-radius: 50px;
}
wx-checkbox .uni-checkbox-input.uni-checkbox-input-checked {
  color: #27b28b !important;
}
.btngroup{
  margin: 40upx auto;
}
.btngroup button{
  width: 140upx;
  height: 60upx;
  line-height: 60upx;
  font-size: 14px;
  display: inline-block;
  border: none;
  padding: 0;
  margin-left: 25upx;
  color: #595959;
}
.queanalysis{
  padding: 7px 15px;
}
.queanalysis .isright{
  color: #27B28B;
}
.queanalysis .iserror{
  color: #FF5979;
}
.footlist{
  height: 55px;
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: space-between;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  background-color: #fff;
  text-align: right;
  line-height: 55px;
  border-top: #dddddd;
}
.footcount{
  height: 100%;
  padding: 0 20upx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.footcount image{
  width: 20px;
  height: 22px;
  vertical-align: text-bottom;
  margin-right: 20upx;
}
.footcount-num{
  font-size: 14px;
  color: #7E7E7E;
}
.footcount-num text{
  color: #27B28B;
  margin-right: 5px;
}
.footlistbtn{
  height: 100%;
  display: flex;
  align-items: center;
}
.footlistbtn button{
  width: 140upx;
  height: 60upx;
  line-height: 60upx;
  font-size: 14px;
  display: inline-block;
  border: none;
  padding: 0;
  margin-right: 25upx;
  background-color: #27B28B;
  color: #FFFFFF;
}
.quelist{
  background-color: #F2F2F2;
  height: 500px;
  overflow-y: scroll;
}
.quelisthead{
  background-color: #27B28B;
  color: #FFFFFF;
  height: 40px;
  text-align: center;
  font-size: 16px;
  background-color: #27B28B;
  line-height: 40px;
}
.quelisthead text{
  margin: 0 15upx;
  line-height: 40px;
}
.card-list{
  width: 100upx;
  height: 100upx;
  border-radius: 50px;
  background-color: #FFFFFF;
  line-height: 100upx;
  text-align: center;
  float: left;
  margin: 20upx 1upx 0upx 20upx;
}
.cardlist view.querror{
  background-color: #FF536B;
}
.cardlist view.queright{
  background-color: #27B28B;
}
.errpop{
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999999;
  background-color: rgba(0,0,0,0.5);
}
.errpopcontent{
  width: 600upx;
  height: 800upx;
  background-color: #FFFFFF;
  margin: 260upx auto 0 auto;
  border-radius: 5px;
  overflow: hidden;
}
.errpop-title{
  height: 80upx;
  background-color: #27B28B;
  color: #FFFFFF;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.errpop-center{
  padding: 0 40upx;
}
.errpop-ot{
  font-size: 16px;
  padding-top: 25px;
  padding-bottom: 20px;
}
.errpop-center textarea{
  width: 500upx;
  height: 140upx;
  padding: 10upx;
  border: 1px solid #DDDDDD;
  border-radius: 5px;
  font-size: 13px;
}  
.errpop-center input{
  height: 60upx;
  line-height: 60upx;
  padding-left: 20upx;
  border: 1px solid #DDDDDD;
}
.errpop-center button{
  width: 500upx;
  height: 60upx;
  line-height: 60upx;
  margin: 50upx auto 0 auto;
  background-color: #27B28B;
  padding: 0;
  color: #FFFFFF;
}
</style>

